fix(site): give the live-demo band its own layout - #692
Merged
Merged
Conversation
The band rendered badly: the call to action sat inline at the end of the paragraph and collided with it, the band had almost no vertical padding so the copy touched the navbar, body text rendered at heading size and weight, the line ran the full width of the container, and a blue button on the blue ground read as a faint outline. The cause is that Docsy's blocks/lead wraps whatever it is given in `.h4 mb-0`, and `.section-live-demo` was the only band on the homepage with no SCSS of its own -- `.section-community` and `.section-resources` both already undo the same inherited defaults. Adds that missing block: vertical rhythm, body typography instead of the inherited heading styles, a 46rem measure so centred text is readable, the scroll-cue arrow hidden as the neighbouring band already does, and the button switched to the project's existing flat-white-button mixin -- the same treatment the hero's Get started button uses. The lead and the button move into their own elements so the button is no longer part of the paragraph's text flow. Applied to all five locale homepages, not just English. Signed-off-by: tym83 <6355522@gmail.com>
Accessibility: - The lead was rgba(white, .92) on #3d6ddd, which composites to 4.28:1 -- under the 4.5:1 AA floor for body copy. Flat white gives 4.74:1. There is little headroom on this ground, so the colour should not be dimmed again without darkening the band. - flat-white-button zeroes box-shadow with !important and Bootstrap has no other focus affordance on .btn, so the button had no keyboard focus indicator at all. Added an explicit focus-visible outline. Design: - Heading dropped from 700 to 500. Every other section label on the page is 500 at this size; the blue ground is the emphasis already. - Measure tightened from 46rem to 40rem -- about 72 characters instead of 84. - Button raised to 1.125rem with roomier padding. It is the only call to action in a band that exists for it, and 1rem read as incidental. Signed-off-by: tym83 <6355522@gmail.com>
…agraph The CTA in a <p> newly satisfied Docsy's `p > a` link-variant rule, which underlines links inside a primary box -- the hero carries an explicit text-decoration:none for exactly that reason. A <div> avoids the rule and is better semantics for a lone button. The two !important declarations were copied from projects-btn-primary and lose nothing: the only competitors sit at lower specificity. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: tym83 <6355522@gmail.com>
Measured padding was symmetric at 4.5rem, but the top reads deeper: the heading's line-box leading adds air above, while the button below ends on a hard edge. 5rem at the bottom balances what the eye actually sees. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: tym83 <6355522@gmail.com>
Timur Tukaev (tym83)
requested review from
Andrei Kvapil (kvaps),
Timofei Larkin (lllamnyp) and
myasnikovdaniil
as code owners
September 12, 2026 05:56
✅ Deploy Preview for cozystack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The markup change touched the English home page, which the freshness check tracks by digest, so the four translations were flagged stale. The translated strings themselves were changed in the same commit and in the same way -- only the wrapper elements around them -- so there is nothing to retranslate; the digests just need to catch up. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: tym83 <6355522@gmail.com>
The band's markup is already on main, but the stylesheet that gives its classes any meaning is not, so the section currently renders with no rules at all: text running to the viewport edge, fallback typography, and a button with no fill. That is what visitors see today. Beyond restoring the layout, this reworks the band itself: - A gradient ground instead of the flat primary fill. The band sits between two white sections, and a flat slab reads as a coloured gap rather than a surface of its own. - The heading goes to 600 weight with a tighter line-height and a slight negative tracking, so it reads as deliberate rather than as default Docsy type. - The button no longer uses the flat-white-button mixin, which paints the label mid-grey with !important. On a saturated blue ground that reads as a disabled control. It is now white with the darkest brand blue as its label, with a shadow, a hover lift, and an explicit focus ring, honouring prefers-reduced-motion. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: tym83 <6355522@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The live-demo band on the home page had no layout of its own. This gives it one.
Before / after, at the same width:
flat-white-buttonmixin.Why it looked like that
Docsy's
blocks/leadwraps whatever it is given in<div class="h4 mb-0">, so the copy inherits heading typography and anything after it joins the paragraph's text flow..section-communityand.section-resourceseach carry their own SCSS to undo exactly this..section-live-demowas the one band on the page with no SCSS at all.Changes
assets/scss/_index.scss— new.section-live-demoblock, placed beside the two sections that solve the same problem.content/{en,de,hi,ru,zh-cn}/_index.md— the lead moves into<p class="live-demo-lead">and the button into<div class="live-demo-cta">, so the button is no longer part of the paragraph. All five locales, not just English: the styles would otherwise apply to markup that four of them do not have.Review
Three reviews, on the front-end cascade, on visual design, and on accessibility and i18n. Everything they raised is either fixed or argued in the thread.
Two were blockers and are worth recording, because both were introduced by this change rather than inherited:
rgba(white, .92)over#3d6dddcomposites to 4.28:1, under the 4.5:1 floor for body copy. It is flat white now, 4.74:1. There is little headroom on this ground, so there is a comment in the SCSS asking that the colour not be dimmed again without darkening the band.flat-white-buttonzeroesbox-shadowwith!important, and Bootstrap has no other focus affordance on.btn. Before this change the band had no SCSS, so the button still had a ring; adding the mixin removed it. There is now an explicit:focus-visibleoutline, verified with a real Tab press rather than a programmatic.focus().Also from review: the heading dropped to weight 500 to match every other section label on the page, the measure tightened from 46rem to 40rem, the button grew to 1.125rem, two copied
!importantdeclarations were dropped, and the CTA moved out of a<p>so it stops satisfying Docsy'sp > aunderline rule — the hero carries an explicittext-decoration: nonefor that same reason.One review point was not taken: restoring the ▼ notch at the band's bottom edge.
.section-communityhas hidden its own since long before this branch, so the motif was already inconsistent. The reading here is that the notch is a "keep scrolling" cue belonging to the hero, and decoration anywhere else. Happy to restore it if the project would rather have it.Verification
Built locally and checked in a browser: all five locales render both new classes with translations, entities and
langattributes intact; the focus ring resolves to a white 2px outline at 3px offset with:focus-visiblematching; the compiled rules win their cascade without!important; and the band's horizontal overflow is unchanged — the 3px on this page comes from the hero and predates this branch.